import React,{useEffect,useState} from 'react';
import { Button, Checkbox, Form, Input } from 'antd';

export default (props:any) => {
    // 记住密码状态
    let [dome, setdome] = useState<Boolean>(true)

    let [username, setname] = useState(JSON.parse(localStorage.getItem('obj')) || '') 
    let [password, setpass] = useState(JSON.parse(localStorage.getItem('obj')) || '') 
   
    const onFinish = (values: any) => {
        console.log('Success:', values);
        props.fs()
        props.stateall(true)
        if (dome == false) {
            let obj = {
                name: '',
                pass:''
            }
            localStorage.setItem('obj',JSON.stringify(obj))
        } else {
            let obj = {
                name: values.username,
                pass:values.password
            }
            localStorage.setItem('obj',JSON.stringify(obj))
        }
        
    };
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    return (
        <Form
            name="basic"
            labelCol={{
                span: 8,
            }}
            wrapperCol={{
                span: 16,
            }}
            initialValues={{
                remember: true,
                
            }}
            
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
        >
            <Form.Item
                name="username"
                wrapperCol={{
                    offset: -4,
                    span: 22,

                }}
                initialValue={username.name|| ''}
                rules={[
                    {
                        required: true,
                        message: '账号不能为空，请输入您的账号！',
                    },
                ]}
                
            >
                <Input placeholder='请输入账号' style={{fontSize:'20px'}} />
            </Form.Item>
            <Form.Item
                name="password"
                initialValue={password.pass || ''}
                rules={[
                    {
                        required: true,
                        message: '密码不能为空，请输入您的密码！',
                    },
                ]}
                wrapperCol={{
                    offset: -4,
                    span: 22,
                }}
            >
                <Input.Password placeholder='请输入密码' style={{ fontSize: '20px' }}  />
            </Form.Item>

            <Form.Item
                name="remember"
                valuePropName="checked"
                wrapperCol={{
                    offset: -4,
                    span: 18,
                }}
            >
                <Checkbox onClick={(e:any) => {
                    if (e.target.checked == false) {
                        setdome(dome=false)
                    } else {
                        setdome(dome=true)
                    }
                    
                }}>记住密码</Checkbox>
            </Form.Item>

            <Form.Item
                wrapperCol={{
                    offset: -4,
                    span: 22,
                }}
            >
                <Button type="primary" htmlType="submit" style={{width:'390px',height:'44px',fontSize:'20px'}}>
                    立即登录
                </Button>
            </Form.Item>
        </Form>
    );
};
